<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 流程步骤展示 -->
      <div class="process-header">
        <h2>订单流程管理</h2>
      </div>
      <!-- <div class="steps">
        <el-steps :active="6" align-center>
          <el-step v-for="(step, index) in processSteps" :key="index" :title="step" />
        </el-steps>
      </div> -->
      <!-- 独立步骤按钮 -->
      <div class="steps-container">
        <div
          v-for="(step, index) in processSteps"
          :key="index"
          class="step-button"
          @click="selectStep(step)"
        >
          <div
            class="step-circle"
            :class="step.status === 'completed' ? 'step-completed' :
              step.status === 'in-progress' ? 'step-in-progress' : 'step-pending'"
          >
            {{ index + 1 }}
          </div>
          <div class="step-name">{{ step.name }}</div>
        </div>
      </div>

      <!-- 步骤详情区域 -->
      <div v-if="selectedStep" class="step-detail-container">
        <div class="step-detail-header">
          <div class="step-detail-title">
            {{ selectedStep.name }} - 操作记录
          </div>
          <div class="step-status-tag" :class="getStatusClass(selectedStep.status)">
            {{ getStatusText(selectedStep.status) }}
          </div>
        </div>

        <table class="detail-table">
          <thead>
            <tr>
              <th>操作人</th>
              <th>完成数量</th>
              <th>开始时间</th>
              <th>完成时间</th>
              <th>所用时长</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(record, idx) in selectedStep.details" :key="idx">
              <td>{{ record.operator }}</td>
              <td>{{ record.completedQuantity }} 件</td>
              <td>{{ record.startTime }}</td>
              <td>{{ record.endTime }}</td>
              <td>{{ record.duration }}</td>
            </tr>
            <tr v-if="!selectedStep.details || selectedStep.details.length === 0">
              <td colspan="5" style="text-align: center; color: #909399;">
                {{ selectedStep.status === 'pending' ? '该步骤尚未开始操作' : '暂无操作记录' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 订单表单 -->
      <div class="order-card">
        <div class="form-container">
          <el-form :model="formData" label-width="150px" label-position="top">
            <!-- 订单基础信息区域 -->
            <div class="form-section">
              <h3 class="section-title">订单基础信息</h3>
              <div class="form-grid">
                <div class="form-group">
                  <el-form-item label="订单编号orderNumber">
                    <el-input v-model="formData.orderNumber" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="批发商参考号wholesalersRefNo">
                    <el-input v-model="formData.wholesalersRefNo" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="订单日期orderDate:">
                    <el-date-picker
                      v-model="formData.orderDate"
                      type="date"
                      class="form-input"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="预计发货日期estimatedShippingDate">
                    <el-date-picker
                      v-model="formData.estimatedShippingDate"
                      type="date"
                      class="form-input"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="订单类型typeOfOrder">
                    <el-select
                      v-model="formData.typeOfOrder"
                      placeholder="请选择"
                      class="form-input"
                    >
                      <el-option label="Kippot" value="kippot" />
                      <el-option label="Challah Cover" value="challah cover" />
                      <el-option label="Bag" value="bag" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="事件日期eventDate">
                    <el-date-picker
                      v-model="formData.eventDate"
                      type="date"
                      class="form-input"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>

            <!-- 客户信息区域 -->
            <div class="form-section">
              <h3 class="section-title">客户信息</h3>
              <div class="form-grid">
                <div class="form-group">
                  <el-form-item label="客户姓名fullName">
                    <el-input v-model="formData.fullName" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="商品编号itemNumber">
                    <el-input v-model="formData.itemNumber" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="数量quantity">
                    <el-input-number
                      v-model="formData.quantity"
                      :min="1"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="电话telephone">
                    <el-input v-model="formData.telephone" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="尺寸size">
                    <el-input v-model="formData.size" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="邮箱email">
                    <el-input v-model="formData.email" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group full-width">
                  <el-form-item label="配送地址shippingAddress">
                    <el-input
                      v-model="formData.shippingAddress"
                      type="textarea"
                      :rows="3"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>

            <!-- 产品细节区域 -->
            <div class="form-section">
              <h3 class="section-title">产品细节</h3>
              <div class="color-grid">
                <div class="form-group">
                  <el-form-item label="面板数panel">
                    <el-input-number
                      v-model="formData.panel"
                      :min="1"
                      :max="8"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
                <div v-for="colorField in colorFields" :key="colorField.prop" class="color-item">
                  <el-form-item :label="colorField.label">
                    <el-color-picker v-model="formData[colorField.prop]" />
                    <span class="color-value">{{ formData[colorField.prop] || '未设置' }}</span>
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="商家标签sellersTag">
                    <el-input v-model="formData.sellersTag" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group full-width">
                  <el-form-item label="外部刺绣/印刷outsideEmbroidery">
                    <el-input
                      v-model="formData.outsideEmbroidery"
                      class="form-input"
                      placeholder="例如：NATHAN PETER LEVINSON STIFTUNG"
                    />
                  </el-form-item>
                </div>
                <div class="form-group full-width">
                  <el-form-item label="内部印刷/标签/刺绣insidePrintings">
                    <el-input
                      v-model="formData.insidePrintings"
                      class="form-input"
                      placeholder="例如：Logo and name"
                    />
                  </el-form-item>
                </div>
                <div class="form-group full-width">
                  <el-form-item label="特殊要求（客户）specialRequest">
                    <el-input
                      v-model="formData.specialRequest"
                      type="textarea"
                      :rows="3"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>

            <!-- 订单状态区域 -->
            <div class="form-section">
              <h3 class="section-title">订单状态</h3>
              <div class="form-grid">
                <div class="form-group">
                  <el-form-item label="订单状态orderStatus">
                    <el-select v-model="formData.orderStatus" class="form-input">
                      <el-option label="待处理" value="pending" />
                      <el-option label="生产中" value="production" />
                      <el-option label="已发货" value="shipped" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="实际发货日期shippingDate">
                    <el-date-picker
                      v-model="formData.shippingDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="快递公司courier">
                    <el-input v-model="formData.courier" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="物流单号trackingNumber">
                    <el-input v-model="formData.trackingNumber" class="form-input" />
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="商品照片itemPhoto">
                    <div class="image-upload-container">
                      <img v-if="formData.itemPhoto" :src="formData.itemPhoto" class="item-image" :size="30" alt="商品照片">
                      <div v-else class="orderNumber">
                        <i class="el-icon-picture-outline" />
                        <p>上传照片</p>
                      </div>
                    </div>
                  </el-form-item>
                </div>
                <div class="form-group full-width">
                  <el-form-item label="操作员备注orderRemarks">
                    <el-input
                      v-model="formData.orderRemarks"
                      type="textarea"
                      :rows="3"
                      class="form-input"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button type="primary" icon="el-icon-check" class="btn-save">保存更改</el-button>
              <el-button icon="el-icon-close" class="btn-cancel">取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderDetail',
  data() {
    return {
      // 流程步骤
      // processSteps: [
      //   '裁剪', '制版', '绣花', '剪线头', '补片', '修片',
      //   '拼片', '合里面', '做条', '包边', '做唛', '修边',
      //   '扣眼', '包扣', '钉扣', '打缎带', '印字', '定面',
      //   '定里', '整形', '检验', '修边', '发货'
      // ],
      selectedStep: null,
      processSteps: [
        { name: '裁剪', status: 'completed',
          details: [
            { operator: '张明', completedQuantity: 80, startTime: '2025-06-01 08:30', endTime: '2025-06-01 16:00', duration: '7小时30分' }
          ]
        },
        { name: '制版', status: 'completed',
          details: [
            { operator: '李华', completedQuantity: 60, startTime: '2025-06-01 09:00', endTime: '2025-06-01 17:30', duration: '8小时30分' }
          ]
        },
        { name: '绣花', status: 'pending',
          details: [
            { operator: '王芳', completedQuantity: 200, startTime: '2025-06-02 09:00', endTime: '2025-06-02 18:00', duration: '9小时' }
          ]
        },
        { name: '剪线头', status: 'pending',
          details: [
            { operator: '刘强', completedQuantity: 200, startTime: '2025-06-03 08:30', endTime: '2025-06-03 17:30', duration: '9小时' }
          ]
        },
        { name: '补片', status: 'in-progress',
          details: [
            { operator: '赵小敏', completedQuantity: 150, startTime: '2025-06-04 09:00', endTime: '2025-06-04 18:00', duration: '9小时' }
          ]
        },
        { name: '修片', status: 'completed',
          details: [
            { operator: '孙婷', completedQuantity: 200, startTime: '2025-06-05 08:30', endTime: '2025-06-05 17:00', duration: '8小时30分' }
          ]
        },
        { name: '拼片', status: 'in-progress',
          details: [
            { operator: '陈浩', completedQuantity: 120, startTime: '2025-06-06 08:00', endTime: '', duration: '进行中' },
            { operator: '周华', completedQuantity: 60, startTime: '2025-06-06 10:30', endTime: '2025-06-06 18:30', duration: '8小时' }
          ]
        },
        { name: '合里面', status: 'pending', details: [] },
        { name: '做条', status: 'pending', details: [] },
        { name: '包边', status: 'completed', details: [] },
        { name: '做唛', status: 'pending', details: [] },
        { name: '修边', status: 'pending', details: [] },
        { name: '扣眼', status: 'completed', details: [] },
        { name: '包扣', status: 'pending', details: [] },
        { name: '钉扣', status: 'pending', details: [] },
        { name: '打缎带', status: 'pending', details: [] },
        { name: '印字', status: 'pending', details: [] },
        { name: '定面', status: 'completed', details: [] },
        { name: '定里', status: 'pending', details: [] },
        { name: '整形', status: 'pending', details: [] },
        { name: '检验', status: 'completed', details: [] },
        { name: '修边', status: 'pending', details: [] },
        { name: '发货', status: 'pending', details: [] }
      ],

      // 订单数据
      formData: {
        id: '1',
        orderNumber: 'WL12665-250604-39245',
        orderDate: '2025-05-23',
        typeOfOrder: 'Kippot',
        itemNumber: 'STN-223',
        quantity: 200,
        wholesalersRefNo: 'REF12345',
        estimatedShippingDate: '2025-06-30',
        eventDate: '2025-07-15',
        fullName: 'Dmitrij Belkin',
        size: '19 cm',
        telephone: '004915156024584',
        panel: 4,
        email: 'info@levinson-stiftung.de',
        shippingAddress: 'Am Neuen Palais 10, 14469 Potsdam, Germany',
        buttonColor: '#FF0000',
        stitchingColor: '#000000',
        rimColor: '#808080',
        liningColor: '#FFFFFF',
        fringeColor: '#000000',
        stringColor: '#000000',
        clipsColor: '#C0C0C0',
        sellersTag: 'DavidKippot',
        outsideEmbroidery: 'NATHAN PETER LEVINSON STIFTUNG',
        insidePrintings: 'Logo and name',
        embOrPr: 'Embroidery',
        embroidery: 'Logo on front',
        printings: 'Name on back',
        seeRefColor: 'Refer to sample',
        model: 'Standard',
        seeAllInside: 'Check Sheet2',
        insideType: 'Label',
        printingsOnLabelColor: '#000000',
        font: 'Arial',
        specialRequest: 'Send photo for approval before batch production',
        orderStatus: 'processing',
        shippingDate: '2025-06-28',
        courier: 'DHL',
        trackingNumber: '1234567890',
        orderRemarks: 'High priority order, ensure timely delivery',
        itemPhoto: ''
      },

      // 颜色字段配置
      colorFields: [
        { label: '按钮颜色buttonColor', prop: 'buttonColor' },
        { label: '缝线颜色stitchingColor', prop: 'stitchingColor' },
        { label: '边缘颜色rimColor', prop: 'rimColor' },
        { label: '内衬颜色liningColor', prop: 'liningColor' },
        { label: '流苏颜色fringeColor', prop: 'fringeColor' },
        { label: '绳线颜色stringColor', prop: 'stringColor' },
        { label: '夹子颜色clipsColor', prop: 'clipsColor' }
      ]
    }
  },
  methods: {

    // 选择步骤
    selectStep(step) {
      this.selectedStep = step
    },

    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 'completed': return '已完成'
        case 'in-progress': return '进行中'
        case 'pending': return '待开始'
        default: return status
      }
    },

    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case 'completed': return 'status-completed'
        case 'in-progress': return 'status-in-progress'
        case 'pending': return 'status-pending'
        default: return ''
      }
    }
  }

}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.app-container {
  max-width: 1400px;
  margin: 0 auto;
}

.process-header {
  text-align: center;
  margin-bottom: 20px;

  h2 {
    color: #303133;
    font-size: 24px;
    margin-bottom: 8px;
  }

  p {
    color: #606266;
    font-size: 16px;
  }
}

.steps {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 30px;
}

.order-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.section-title {
  color: #409eff;
  font-size: 18px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 2px;
    background-color: #409eff;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 15px;
}

.form-group {
  &.full-width {
    grid-column: 1 / -1;
  }
}

.form-input {
  width: 100%;
}

.color-item {
  display: flex;
  align-items: center;

  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;

    .el-color-picker {
      margin-right: 10px;
    }
  }
}

.color-value {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.image-upload-container {
  width: 120px;
  height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #f5f7fa;

  .item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .image-placeholder {
    text-align: center;
    color: #c0c4cc;

    i {
      font-size: 32px;
      margin-bottom: 8px;
    }

    p {
      font-size: 12px;
      margin: 0;
    }
  }
}

.action-buttons {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;

  .btn-save {
    background-color: #409eff;
    border-color: #409eff;
    padding: 10px 25px;
  }

  .btn-cancel {
    background-color: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
    padding: 10px 25px;
    margin-left: 15px;

    &:hover {
      background-color: #f5f7fa;
    }
  }
}

@media (max-width: 992px) {
  .form-grid, .color-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.app-container {
      max-width: 1400px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    /* 顶部导航栏样式 */
    .header {
      background: linear-gradient(135deg, #1d58c7 0%, #409eff 100%);
      color: white;
      padding: 20px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .app-title {
      font-size: 24px;
      font-weight: bold;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #e6f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;
      font-weight: bold;
      color: #409eff;
    }

    /* 流程步骤区域 */
    .process-header {
      padding: 20px 40px 0;
      text-align: center;
    }

    .process-title {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 15px;
    }

    /* 独立步骤按钮样式 */
    .steps-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      padding: 0 20px 30px;
    }

    .step-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 85px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .step-button:hover {
      transform: translateY(-5px);
    }

    .step-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
      color: white;
      margin-bottom: 8px;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .step-completed {
      background: linear-gradient(145deg, #409eff, #1d58c7);
    }

    .step-in-progress {
      background: linear-gradient(145deg, #67c23a, #349038);
    }

    .step-pending {
      background: linear-gradient(145deg, #909399, #606266);
    }

    .step-name {
      font-size: 14px;
      text-align: center;
      line-height: 1.4;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #606266;
    }

    .step-button:hover .step-name {
      color: #409eff;
      font-weight: bold;
    }

    /* 步骤详情区域 */
    .step-detail-container {
      background: #f8fafc;
      border-radius: 8px;
      padding: 25px;
      margin: 0 30px 30px;
      border-left: 4px solid #409eff;
    }

    .step-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 15px;
    }

    .step-detail-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #409EFF, #f8fafc);
    }

    .step-detail-title {
      font-size: 20px;
      font-weight: bold;
      color: #1d2c4d;
      display: flex;
      align-items: center;
    }

    .step-status-tag {
      font-weight: bold;
      padding: 5px 12px;
      border-radius: 15px;
    }

    .status-completed {
      background-color: #f0f9eb;
      color: #67c23a;
      border: 1px solid #e1f3d8;
    }

    .status-in-progress {
      background-color: #ecf5ff;
      color: #409eff;
      border: 1px solid #c6e2ff;
    }

    .status-pending {
      background-color: #fdf6ec;
      color: #e6a23c;
      border: 1px solid #f5dab1;
    }

    .detail-table {
      width: 100%;
      border-collapse: collapse;
    }

    .detail-table th {
      background-color: #f0f7ff;
      padding: 15px;
      text-align: left;
      font-weight: 600;
      color: #2c3e50;
      border-bottom: 2px solid #409EFF;
    }

    .detail-table td {
      padding: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    .detail-table tr:hover td {
      background-color: rgba(64, 158, 255, 0.05);
    }

    .no-step-selected {
      text-align: center;
      padding: 60px 20px;
      color: #909399;
      font-size: 18px;
    }

    .no-step-selected i {
      font-size: 48px;
      display: block;
      margin-bottom: 15px;
      color: #c0c4cc;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .steps-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 15px;
      }

      .step-button {
        flex: 0 0 auto;
        margin-right: 10px;
      }
    }

    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        padding: 15px;
      }

      .step-circle {
        width: 42px;
        height: 42px;
        font-size: 16px;
      }

      .step-name {
        font-size: 12px;
        height: 36px;
      }

      .detail-table th, .detail-table td {
        padding: 10px 8px;
        font-size: 14px;
      }
    }
</style>
